<p class="title">数据名称 - 进度条 - 数值</p>
<app-column-chart-dyn></app-column-chart-dyn>
<p class="title">数据 - 名称+图片 - 进度条 - 数值</p>
<app-country-column-chart></app-country-column-chart>
<p class="title">给定映射区间</p>
<p class="text">
    <b>功能：</b>
    传入区间范围（不均等区间），y轴标签区域均分，数据映射显示。 <br>
    <b>难点：</b>
    1.y轴标签修改显示方式;
    2.数据本身是根据数据显示的因此会存在数据不在y轴标签区间内的问题，需要处理数据映射到y轴标签区间内。<br>
    <b>代码说明：</b><br>
    1.tooltip显示通过formatter函数处理，得到日期、原始数据，计算出风险等级，marker为小圆点，组合后拼接出来; <br>
    2.y轴标签通过formatter函数处理，得到区间范围，按照风险进行映射; <br>
    3.这个每个范围的颜色背景都铺在第一个line的series数据上，如果关闭第一个数据的图例背景颜色也会消失，
    对此的解决方法是设置三层series，第一层为y轴右侧的彩色文字，第二层为分区背景色，后面数据层为数据，这样关闭图例时，背景色不会消失。<br>
    4.axisPointer.show设置为false, 对x轴/y轴上的 <span style="color: red;">指示线</span> 进行禁用，这样悬浮上去是就不会出现异常的指示线了。<br>
    5.axisTick.show设置为false, 对x轴/y轴上的 <span style="color: red;">刻度线</span> 进行禁用。<br>
    6.axisLine控制 <span style="color: red;">坐标轴线</span> 的样式，color控制线的颜色，show控制是否显示。<br>
    7.axisLabel控制 <span style="color: red;">坐标轴标签</span> 的样式，color控制标签的颜色，show控制是否显示。<br>

    8.【函数说明】reflectDetail将数据组进行映射，mapValue映射单个数据，getRiskIndex获取输入数据在哪个区间，getBarColor映射颜色和标签。<br>

</p>
<div class="container">
    <div appEchartsReflection class="echart" [appEchartsDoubleYLine]="appEchartsDoubleYLine" ></div>
</div>
